import { ReactNode } from "react";
import { Tabs, Tab } from "@mui/material";

type HandleChangeFunction = (
  event: React.SyntheticEvent,
  newValue: number
) => void;

interface TabsControlProps {
  tabs: string[];
  children?: ReactNode;
  value: number;
  handleChange: HandleChangeFunction;
}

function a11yProps(index: number) {
  return {
    id: `full-width-tab-${index}`,
    "aria-controls": `full-width-tabpanel-${index}`,
  };
}
const TabsControl = ({
  tabs,
  value,
  handleChange,
  children,
}: TabsControlProps) => {
  return (
    <>
      {children}
      <Tabs
        value={value}
        onChange={handleChange}
        indicatorColor="secondary"
        textColor="inherit"
        variant="fullWidth"
        aria-label="full width tabs example"
      >
        {tabs.map((x, i) => (
          <Tab key={x} label={x} {...a11yProps(i)} />
        ))}
      </Tabs>
    </>
  );
};

export default TabsControl;
